<!--
 * @Description:
 * @Autor: 刘诗文
 * @Date: 2020-12-23 13:42:26
 * @LastEditors: 马毅
 * @LastEditTime: 2021-05-02 15:58:47
-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" :rows="3" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500px"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="reqData">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getOwnerInfo } from '@/api/customerRepair/vehicleOwnerManagement/vehicleChange';

export default {
  name: 'queryVehicleModel',
  components: {},
  mixins: [dictionary],
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    this.BaseTable = null;
    this.selectData = [];
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      fetchApi: getOwnerInfo,
      columns: this.createTableColumns()
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin'
        },
        {
          title: '客户性质',
          dataIndex: 'ownerProperty',
          showOverflowTooltip: true,
          dictItems: this.createDictList(8011),
          render: props => {
            return <span>{this.createDictText(props.row.ownerProperty, 8011)}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo'
        },
        {
          title: '车主姓名',
          dataIndex: 'ownerName'
        },
        {
          title: '车主手机',
          dataIndex: 'mobile'
        },
        {
          title: '证件类型',
          dataIndex: 'ctCode',
          showOverflowTooltip: true,
          render: props => {
            return <div>{this.createDictText(props.row.ctCode, 8013)}</div>;
          }
        },
        {
          title: '证件号码',
          dataIndex: 'certificateNo',
          showOverflowTooltip: true
        }
      ];
    },
    onRowSelectChange(val) {
      if (!val.length) {
        this.selectData = null;
      } else this.selectData = val[0];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeDialog() {
      this.$emit('close', false);
    },
    reqData() {
      this.$emit('vehicleData', this.selectData);
      this.$emit('close', false);
    }
  }
};
</script>

<style lang="less" scoped></style>
